<template>
  <div class="app-container  bg-gray">
    <el-card class="box-1">
      <div slot="header"><span>创建表单</span></div>
      <el-form ref="form" :model="form" label-width="160px">
        <el-form-item label="表单状态">
          <el-switch v-model="form.status"/>
        </el-form-item>
        <el-form-item label="表单名称">
          <el-input v-model="form.name"/>
        </el-form-item>
        <el-form-item label="表单设置" prop="goods_name">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-card shadow="never">
                <ul class="item-select">
                  <li v-for="(item, index) in typeList" :key="index" @click="addItem(item.value)">{{ item.label }}</li>
                </ul>
              </el-card>
            </el-col>
            <el-col :span="17">
              <el-card shadow="never">
                <el-alert :closable="false" title="注：按住可拖动栏目顺序" type="info"/>
                <ul class="item">
                  <draggable :list="form.formData">
                    <li v-for="(item,index) in form.formData" :key="index">
                      <el-card>
                        <div class="title">
                          <div>
                            <b>栏目 #{{ item.id }}</b>
                            <el-tag v-if="item.type==='SingleInput'" effect="dark">单行文本</el-tag>
                            <el-tag v-if="item.type==='TextareaInput'" effect="dark">多行文本</el-tag>
                            <el-tag v-if="item.type==='Radio'" type="danger" effect="dark">单选</el-tag>
                            <el-tag v-if="item.type==='CheckBox'" type="danger" effect="dark">多选</el-tag>
                            <el-tag v-if="item.type==='DatePicker'" type="warning" effect="dark">日期选择</el-tag>
                            <el-tag v-if="item.type==='TimePicker'" type="warning" effect="dark">时间选择</el-tag>
                            <el-tag v-if="item.type==='SelectAddress'" type="warning" effect="dark">地点选择</el-tag>
                            <el-tag v-if="item.type==='UploadPicture'" type="info" effect="dark">图片上传</el-tag>
                            <el-tag v-if="item.type==='UploadVoice'" type="info" effect="dark">语音上传</el-tag>
                            <el-tag v-if="item.type==='UploadFile'" type="info" effect="dark">附件上传</el-tag>
                            <el-tag v-if="item.parentId" type="info">关联栏目：#{{ item.parentId }} 关联选项：#{{ item.parentOptionId }}</el-tag>
                          </div>
                          <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="deleteItem(index)"/>
                        </div>
                        <el-form label-width="100px">
                          <el-form-item label="是否必填：">
                            <el-radio v-model="item.isMust" label="1">是</el-radio>
                            <el-radio v-model="item.isMust" label="0">否</el-radio>
                          </el-form-item>
                          <el-form-item v-if="item.type==='Radio'" label="导出统计：">
                            <el-radio v-model="item.statistics" label="1">是</el-radio>
                            <el-radio v-model="item.statistics" label="0">否</el-radio>
                          </el-form-item>
                          <el-form-item label="栏目标题：">
                            <el-input v-model="item.name" placeholder="请填写栏目内容"/>
                          </el-form-item>
                          <el-form-item label="解释说明：">
                            <el-input v-model="item.explain" placeholder="栏目内容说明，可不填"/>
                          </el-form-item>
                          <slot v-if="item.type==='Radio'||item.type==='CheckBox'">
                            <el-form-item v-for="(subItem, subIndex) in item.options" :key="subIndex" :label="`选项 #${subItem.id}：`">
                              <el-input v-model="item.options[subIndex].value" style="width: 60%;"/>
                              <el-tag v-if="subItem.sonIds.length>0" type="info">关联 #{{ subItem.sonIds }}
                                <el-dropdown trigger="click" @command="command=>{subItem.sonIds.push(id);addItem(command, item.id, subItem.id)}">
                                  <el-button type="warning" icon="el-icon-plus" circle size="mini" style="zoom: .6"/>
                                  <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item v-for="(typeItem, typeIdx) in typeList" :key="typeIdx" :command="typeItem.value">{{ typeItem.label }}</el-dropdown-item>
                                  </el-dropdown-menu>
                                </el-dropdown>
                              </el-tag>
                              <el-dropdown v-if="subItem.sonIds.length===0" trigger="click" @command="command=>{subItem.sonIds.push(id);addItem(command, item.id, subItem.id)}">
                                <el-button type="primary">添加关联项</el-button>
                                <el-dropdown-menu slot="dropdown">
                                  <el-dropdown-item v-for="(typeItem, typeIdx) in typeList" :key="typeIdx" :command="typeItem.value">{{ typeItem.label }}</el-dropdown-item>
                                </el-dropdown-menu>
                              </el-dropdown>
                              <el-button circle icon="el-icon-minus" size="mini" type="primary" @click="deleteSubItem(index, subIndex)"/>
                            </el-form-item>
                            <el-form-item>
                              <el-button @click="addSubItem(index)">添加选项</el-button>
                            </el-form-item>
                          </slot>
                          <slot v-if="item.type==='UploadFile'">
                            <el-form-item label="附件数量：">
                              <el-input-number v-model="item.uploadCount" :min="1" :max="9" size="small"/>
                            </el-form-item>
                          </slot>
                          <slot v-if="item.type==='UploadPicture'">
                            <el-form-item label="图片数量：">
                              <el-input-number v-model="item.uploadCount" :min="1" :max="9" size="small"/>
                            </el-form-item>
                            <el-form-item label="图片类型：">
                              <el-radio v-model="item.uploadPicType" label="1">普通图片</el-radio>
                            </el-form-item>
                          </slot>
                        </el-form>
                      </el-card>
                    </li>
                  </draggable>
                </ul>
              </el-card>
            </el-col>
          </el-row>
        </el-form-item>
        <div style="text-align:center">
          <el-button :disabled="!submitStatus" type="primary" style="width: 120px;" @click="submitForm('form')">保 存</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  export default {
    components: {
      draggable
    },
    data() {
      return {
        // 栏目集合
        typeList: [{
          label: '单行文本',
          value: 'SingleInput'
        }, {
          label: '多行文本',
          value: 'TextareaInput'
        }, {
          label: '单选栏',
          value: 'Radio'
        }, {
          label: '多选栏',
          value: 'CheckBox'
        }, {
          label: '日期选择',
          value: 'DatePicker'
        }, {
          label: '时间选择',
          value: 'TimePicker'
        }, {
          label: '地点选择',
          value: 'SelectAddress'
        }, {
          label: '图片上传',
          value: 'UploadPicture'
        }, {
          label: '语音上传',
          value: 'UploadVoice'
        }, {
          label: '附件上传',
          value: 'UploadFile'
        }],
        id: 1,
        optionId: 1,
        submitStatus: true,
        form: {
          name: '',
          formData: [],
          status: true
        }
      }
    },
    watch: {},
    created() {
      this.form.id = this.$route.query.id;
      this.getFormInfo();
    },
    methods: {
      /**
       *  获取用户信息
       *  接口:'member/detail/{id}'
       */
      getFormInfo() {
        const url = 'form/getInfo';
        const data = {id: this.form.id};
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.form = res.data;
          this.form.status = !!this.form.status;
          this.id = res.data.itemId;
          this.optionId = res.data.optionId;
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员');
        })
      },

      addItem(type, parentId, parentOptionId) {
        this.form.formData.push({
          id: this.id++,
          parentId: parentId || null,
          parentOptionId: parentOptionId || null,
          type: type,
          name: '',
          explain: '',
          options: [],
          uploadPicType: '1',
          uploadCount: 1,
          isMust: '1',
          statistics: '0',
          display: !parentId
        });
        console.log(this.form.formData)
      },
      deleteItem(index) {
        if (this.form.formData[index].parentId) {
          for (let i = 0; i < this.form.formData.length; i++) {
            if (this.form.formData[i].id === this.form.formData[index].parentId) {
              for (let j = 0; j < this.form.formData[i].options.length; j++) {
                if (this.form.formData[i].options[j].id === this.form.formData[index].parentOptionId) {
                  for (let k = 0; k < this.form.formData[i].options[j].sonIds.length; k++) {
                    if (this.form.formData[i].options[j].sonIds[k] === this.form.formData[index].id) {
                      this.form.formData[i].options[j].sonIds.splice(k, 1);
                      break;
                    }
                  }
                }
              }
            }
          }
        }
        const id = this.form.formData[index].id;
        if (this.form.formData[index].type === 'Radio' && this.form.formData[index].options.length > 0) {
          for (let i = 0; i < this.form.formData[index].options.length; i++) {
            for (let j = 0; j < this.form.formData[index].options[i].sonIds.length; j++) {
              for (let k = 0; k < this.form.formData.length; k++) {
                if (this.form.formData[k].id === this.form.formData[index].options[i].sonIds[j]) {
                  this.form.formData.splice(k, 1);
                  break;
                }
              }
            }
          }
        }
        for (let i = 0; i < this.form.formData.length; i++) {
          if (this.form.formData[i].id === id) {
            this.form.formData.splice(i, 1);
            break;
          }
        }
      },

      addSubItem(index) {
        this.form.formData[index].options.push({id: this.optionId++, value: '', sonIds: []});
      },
      deleteSubItem(index, subIndex) {
        if (this.form.formData[index].type === 'Radio' && this.form.formData[index].options[subIndex].sonId && this.form.formData[index].options[subIndex].sonId.length > 0) {
          for (let i = 0; i < this.form.formData[index].options[subIndex].sonId.length; i++) {
            for (let j = 0; j < this.form.formData.length; j++) {
              if (this.form.formData[j].id === this.form.formData[index].options[subIndex].sonId[i]) {
                this.form.formData.splice(j, 1);
                break;
              }
            }
          }
        }
        this.form.formData[index].options.splice(subIndex, 1);
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.form.name === '' || this.form.name === null) {
              this.$message.error('请输入表单名称');
              return;
            }
            if (this.form.formData.length === 0) {
              this.$message.error('请设置表单内容');
              return;
            }
            for (let i = 0; i < this.form.formData.length; i++) {
              if (this.form.formData[i].name === '' || this.form.formData[i].name === null) {
                this.$message.error('表单设置内有项目未填写名字，请填写或删除');
                return;
              }
              if (this.form.formData[i].type === 'Radio' || this.form.formData[i].type === 'CheckBox') {
                if (this.form.formData[i].options.length === 0) {
                  this.$message.error('表单设置内单选或多选项目存在选项为空的项目，请填写或删除');
                  return;
                }
                for (let j = 0; j < this.form.formData[i].options.length; j++) {
                  if (this.form.formData[i].options[j] === '' || this.form.formData[i].options[j] === null) {
                    this.$message.error('表单设置内单选或多选项目存在选项为空的项目，请填写或删除');
                    return;
                  }
                }
              }
            }
            this.submitStatus = false;
            const data = Object.assign({}, this.form);
            data.formData = JSON.stringify(data.formData);
            data.status = data.status ? 1 : 0;
            data.itemId = this.id;
            data.optionId = this.optionId;
            console.log(data);
            const url = 'form/edit';
            this.$store.dispatch('GetConnect', {url, data}).then(res => {
              this.$message.success(res.msg);
              this.$router.back(-1);
            }).catch((e) => {
              this.submitStatus = true;
              this.$message.error(e.msg);
            })
          } else {
            this.$message.error('提交失败,请检查必填项');
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
@import '../../../styles/index.scss';
.box-1 {
  width: 1200px;
  margin: 0 auto;
  .el-form {
    max-width: 1100px;
    .item-select {
      margin: 0;
      > li {
        cursor: pointer;
      }
    }
    .item {
      min-height: 344px;
      max-height: 600px;
      overflow: auto;
      list-style:none;
      margin: 0;
      padding: 0;
      padding-right: 20px;
      li {
        margin: 15px 10px;
        .title {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
        }
        .el-form-item {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
